<template>
  <div class="login">
    <SvgIcon class-name="logo" icon-class="logo" />
    <LoginCard class="login-main"/>
    <div class="footer">
      <MyFooter font-color="#999"/>
    </div>
  </div>
</template>

<script setup lang="ts">
import MyFooter from "@/components/MyFooter.vue";
import SvgIcon from "@/components/common/SvgIcon.vue";
import LoginCard from "@/components/login/LoginCard.vue";
</script>

<style scoped lang="less">
.login {
  width: 100%;
  height: 100vh; // 使用100vh来确保高度占满视口
  background-size: cover;
  background-image: url("https://img.mikufufu.com/image/5.webp");
  position: relative;
  z-index: 1;
  &:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: -1;
  }
  .logo {
    position: absolute;
    top: 24px;
    left: 40px;
    width: 176px;
    height: 48px;
    color: #FFFFFF;
  }
  .login-main {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
.footer {
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0);// 水平居中
}
</style>
